<template>
    <div class="container">
        <el-card v-for="classInfo in classInfoList" :key="classInfo.className" class="classinfo-list">
            <template #header>
                <span style="font-size: 24px;">
                    {{ classInfo.className }}
                </span>
            </template>
            <el-row>
                <el-col :span="12">
                    <div class="statistic-card">
                        <el-statistic :value="classInfo.classIntegral">
                            <template #title>
                                班级积分
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="statistic-card">
                        <template v-if="classInfo.workCompletion >= 80">
                            <el-statistic :value="classInfo.workCompletion" :precision="1" value-style="color:green">
                                <template #title>
                                    作业完成率
                                </template>
                                <template #suffix>
                                    <span style="color: green">
                                        %
                                    </span>
                                </template>
                            </el-statistic>
                        </template>
                        <template v-else-if="classInfo.workCompletion < 80 && classInfo.workCompletion >= 50">
                            <el-statistic :value="classInfo.workCompletion" :precision="1" value-style="color:orange">
                                <template #title>
                                    作业完成率
                                </template>
                                <template #suffix>
                                    <span style="color: orange">
                                        %
                                    </span>
                                </template>
                            </el-statistic>
                        </template>
                        <template v-else>
                            <el-statistic :value="classInfo.workCompletion" :precision="1" value-style="color:red">
                                <template #title>
                                    作业完成率
                                </template>
                                <template #suffix>
                                    <span style="color: red">
                                        %
                                    </span>
                                </template>
                            </el-statistic>
                        </template>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
const classInfoList = [
    {
        className: "软件工程1班",
        classIntegral: 2100,
        workCompletion: 83.3,
    },
    {
        className: "软件工程2班",
        classIntegral: 2800,
        workCompletion: 90,
    },
    {
        className: "计算机科学与技术1班",
        classIntegral: 1500,
        workCompletion: 78.2,
    },
    {
        className: "计算机科学与技术2班",
        classIntegral: 1800,
        workCompletion: 45,
    }
]
</script>

<style scoped>
.container {
    padding: 20px 0;
}

.classinfo-list {
    margin-top: 20px;
}
</style>